<template>
  <div
    :style="{ height: height + 'px', width: width + 'px' }"
    class="menu-wrapper"
  >
    <div class="menu-title">
      <div class="title-line"></div>
      <div 
        :title="title" 
        :style="{'font-size': $attrs.fontSize,'font-weight' : $attrs.bold ? 'bold' : 'normal','font-style': $attrs.italic ? 'italic' : 'normal','text-decoration': $attrs.underline ? 'underline' : 'none','text-align': `${$attrs.textAlign}`,'color': `${$attrs.fontColor}`,'line-height': `${$attrs.lineHeight}`}"  
        class="title-name"
      >{{title}}</div>
      <div class="title-more" @click="jumpToPage">更多</div>
    </div>
    <div class="menu-box" :style="{ background: backColor }">
      <div :style="{height:'100%',width:'100%'}"/>
    </div>
  </div>
</template>

<script>
import echarts from 'echarts'
import { getChartData,getPortalInfo } from "@/api/custom/portalDesigner";
import {getMenu} from '@/api/system/menu';
import {getHomePage} from '@/api/login'
require('echarts/theme/macarons') // echarts theme

const animationDuration = 3000

export default {
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: Number,
      default: '500'
    },
    height: {
      type: Number,
      default: '300'
    },
    title: {
      type: String,
      default: "雷达图",
    },
    backColor: {
      type: String,
      default: "#ffffff",
    },
    tableName: {
      type: String,
      dafault: "",
    },
    nameField: {
      type: String,
      dafault: "",
    },
    dataField: {
      type: String,
      dafault: "",
    },
    columns:{
      type: Array,
      dafault: [],
    },
    Ydata:{
      type: Array,
      dafault: [],
    },
    CNameField:{
      type:String,
      default:''
    },
    CDataField:{
      type:String,
      default:''
    },
    jumpTo: {
      type: Number,
      default: 0
    },
  },
  data() {
    return {
      arr:[],
      Xdata:[],
      YDATA:[],
    }
  },
  watch: {
    width(val){
      if (this.chart) {
        this.chart.resize({width:val,height:this.height-40})
      }
    },
    height(val) {
      if (this.chart) {
        this.chart.resize({width:this.width,height:val-40})
      }
    },
    columns: {
      handler(val) {
        this.getAxisData()
      },
    },
    Ydata:{
      handler(val) {
        this.getAxisData()
      },
    },

  },
  mounted() {
    this.YDATA =this.Ydata
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },

  methods: {
    initChart() {
      this.chart = echarts.init(this.$el.children[1], "macarons");
      this.chart.resize({width:this.width,height:this.height-40})
      this.getAxisData()
    },
    //界面跳转
    async jumpToPage() {
      const flag = this.$store.state.currentStep.clickFlag
      if(flag){
        let toUrl = ''
        await getHomePage().then(res => {
          toUrl= res.data.path
        }).catch(error => {
          console.log(error)
        })
        let urls = []
        let res = null
        while (true) {
          res = await getMenu(res ? res.data.parentId : this.jumpTo)
          if (res.code === 0) {
            if (res.data) {
              urls.push(res.data.path)
              if (res.data.parentId === 0) {
                break
              }
            } else {
              break
            }
          }
        }
        if (urls.length > 0) {
          toUrl = urls.reverse().join('/')
        }
        this.$router.push(toUrl)
      }
    },
    //获取名称值/显示值的数据
    getAxisData() {
      let params = {
        tableName: this.tableName,
        fieldNameX: this.nameField,
        fieldNameY:this.dataField
      };
      if(this.tableName&&this.nameField&&this.dataField){
        getChartData(params)
          .then((res) => {
            if (res.code === 0) {   
              this.YDATA = res.data.Y
              this.Xdata = res.data.X
              this.setChart()
            }
          })

          .catch((e) => console.log(e));
      }
    },
    setChart(){
      this.arr = []
      this.columns.map((item,index)=>{
        let Index = this.Xdata.indexOf(item.oldName)
        if(Index===-1) {
          this.arr.push('0')
        }else{
          this.arr.push(this.YDATA[Index])
        }
      }) 

      this.chart.setOption({
        tooltip: {
          trigger: 'axis',
          // axisPointer: { // 坐标轴指示器，坐标轴触发有效
          //   type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          // }
        },
        radar: {
          radius: '55%',
          center: ['50%', '47%'],
          splitNumber: 8,
          // splitArea: {
          //   areaStyle: {
          //     color: 'rgba(127,95,132,.3)',
          //     opacity: 1,
          //     shadowBlur: 45,
          //     shadowColor: 'rgba(0,0,0,.5)',
          //     shadowOffsetX: 0,
          //     shadowOffsetY: 15
          //   }
          // },
          // indicator: [
          //   { name: 'Sales', max: 10000 },
          //   { name: 'Administration', max: 20000 },
          //   { name: 'Information Techology', max: 20000 },
          //   { name: 'Customer Support', max: 20000 },
          //   { name: 'Development', max: 20000 },
          //   { name: 'Marketing', max: 20000 }
          // ]
          indicator: this.columns?this.columns:[]
        },
        legend: {
          left: 'center',
          bottom: '10',
          data: this.columns?this.columns.name:''
        },
        series: [{
          type: 'radar',
          symbolSize: 0,
          // areaStyle: {
          //   normal: {
          //     shadowBlur: 13,
          //     shadowColor: 'rgba(0,0,0,.2)',
          //     shadowOffsetX: 0,
          //     shadowOffsetY: 10,
          //     opacity: 1
          //   }
          // },
          lineStyle:{
            // color:'red'
          },
          tooltip: {
            trigger: 'item'
          },
          data: [
            {
              value: this.arr?this.arr:[],
              name: this.CNameField
            }
          ],
          animationDuration: animationDuration
        }]
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.menu-wrapper {
  cursor: pointer;
  color: rgba(0, 0, 0, 0.45);
  font-size: 16px;
  background: #fff;
  box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  .menu-title {
    width: 100%;
    height: 40px;
    line-height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    .title-line {
      margin: 0 10px;
      width: 5px;
      height: 20px;
      background: #409eff;
    }
    .title-name {
      width:calc(100% - 50px);
      padding-right:2% ;
      overflow:hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
    }
    .title-more {
      width: 45px;
      float: right;
      right: 0px;
      color: #409eff;
    }
  }

  .menu-box {
    width: 100%;
    height: calc(100% - 40px);
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
}
</style>